<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../common/taglibs.jsp"%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%@ include file="../common/commonCssJs.jsp"%>
</head>
<body>

<div id="wapper">
	<header>
	<%@ include file="../common/layout/header.jsp"%>
	</header>
	
	<nav>
	<%@ include file="../common/layout/nav.jsp"%>
	</nav>
	
	<aside>
	<%@ include file="../common/layout/aside.jsp"%>
	</aside>
	
	<section>
		<form action="updBoard" method="POST">
		<input type="hidden" id="num" name="num" value="${board.num}" />
		<input type="hidden" id="pageNo" name="pageNo" value="${param.pageNo}" />
			<table>
				<tr>
					<th>제목</th>
					<td>${board.title}</td>
				</tr>
				<tr>
					<th>내용</th>
					<td>
						${fn:replace(board.content, '\\r\\n', '<br>')}
					</td>
				</tr>
				<tr>
					<th>첨부파일</th>
					<td>${board.file}</td>
				</tr>		
				<tr>
					<td><input type="button" id="update" value="수정" /></td><td><input type="button" id="cancel" value="목록" /></td>
				</tr>
			</table>
			
			<table id="comment">
			<c:forEach items="${commentList}" var="comment">
				<input type="hidden" name="board_num" value="${comment.board_num}" />
				<tr>
					<td><span>${comment.content}</span><a href="comment">삭제</a></td>
				</tr>
			</c:forEach>
			</table>
			
			<table>
				<tr>
					<td><textarea id="content" name="content" cols="50" rows="5"></textarea></td>
				</tr>
				<tr>
					<td><input type="button" id="save" value="등록" /> </td>
					<td><input type="button" id="delete" value="삭제" /> </td>
				</tr>
			</table>
		</form>
	</section>
	
	<footer>
	<%@ include file="../common/layout/footer.jsp"%>
	</footer>
</div>

<script type="text/javascript">
	$("#update").click(function() {
		$("form").submit();
	});
	
	$("#cancel").click(function() {
		$("form").attr("action", "boardList").submit();
	});		
	
	$("#save").click(function() {
		if($.trim($("#content").val()) == "") {
			alert("댓글을 입력하세요.");
			return false;
		}
		
		$.post("comment", $("form").serialize(),
			function(data){
				var commentObj = data.commentObj;
				var trElement = "<tr><td><span>" + commentObj.comment + "</span></td></tr>";
				$("#comment tr:last").after(trElement);
			}
		, "json");
	});	
</script>
</body>
</html>